<template>
	<view>
		<view class="align-center justify-between ptb15 posFixed zIndex999 w100 bgF7 plr12">
			<view class="ft14"><text>{{$t('index')[content]}}</text></view>
			<view class="align-center" @click="csort()">
				<view v-if="pxtitle && !isshow" class="ft14 gray6 mr6" :style="pxtitle&& !isshow?'color:#F44A42;':''">
					<text>{{$t('fan').排序}}</text>
				</view>
				<view v-else class="ft14 gray6 mr6" :style="isshow?'color:black;':''"><text>{{$t('fan').排序}}</text>
				</view>
				<image v-if="pxtitle && !isshow" style="width: 20rpx;height: 10rpx;"
					:src="(pxtitle && !isshow) ?'../../../static/images/fans/sxy.png':''" mode="aspectFill"></image>
				<image v-else style="width: 20rpx;height: 10rpx;"
					:src="isshow?'../../../static/images/fans/heixia.png':'../../../static/images/fans/sxn.png'"
					mode="aspectFill"></image>
			</view>
		</view>
		<mescroll-body top='0' @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption" :bottombar="false">
			<view style="padding: 80rpx 24rpx 30rpx;">
				<view v-if="nowUserinfo.length>0">
					<view class="bgWhite plr15 justify-between align-center ptb15 mt10 radius8"
						v-for="(item,index) in nowUserinfo" :key="index"
						@click="navTo(`/pages/fans/fans-detail?uid=${item.id}`)">
						<view class="align-center">
							<image class="radius50" :src="item.avatar" mode="aspectFill"
								style="width: 80rpx;height: 80rpx;">
							</image>
							<view class="ml10">
								<view class="align-center">
									<view class="ft15 bold mr10"><text>{{item.nickname}}</text></view>
									<!-- 如果是会员/plus会员，显示等级 12-->
									<view v-if="item.level<3">
										<image :src="'../../../static/images/icon/vip'+item.level+lang+'.png'"
											mode="heightFix" class="block" style="height: 40rpx;"></image>
									</view>
									<!-- 是运营商会员/运营商plus会员，显示星级 34 -->
									<view class="" v-if="item.level>2">
										<image :src="'../../../static/images/icon/'+(item.star-1)+lang+'x.png'"
											mode="heightFix" class="block" style="height: 40rpx;"></image>
									</view>
								</view>
								<view class="ft12 gray6 ptb4"><text>{{$t('fan').备注}}:{{item.remark || ""}}</text></view>
								<view class="align-center">
									<view class="ft12 gray6 mr10"><text>{{$t('common').电话}}:{{item.phone}}</text></view>
									<image src="../../../static/images/index/hongdianhua.png" mode="aspectFill"
										style="width: 24rpx;height: 24rpx;" @click.stop="call(index)"></image>
								</view>
							</view>
						</view>
						<view>
							<image src="../../../static/images/index/rightt.png" mode="aspectFill"
								style="width: 10rpx;height: 18rpx;"></image>
						</view>
					</view>
				</view>
				<!-- 				<view class="mt10 tc" v-else>
					<image src="../../../static/images/empty/none.png" mode="" style="width: 520upx;height: 380upx;">
					</image>
					<view class="ft15">{{$t('common').暂无数据}}</view>
				</view> -->
			</view>
		</mescroll-body>
		<!-- 排序 -->
		<view v-if="isshow" @click="csort()" class=" posFixed w100 zIndex999 "
			style="top: 88rpx;background: rgba(0, 0, 0, 0.5);height: 100vh;">
			<view class="px-con bgWhite" @click.stop="">
				<view class="px-list align-center justify-between" v-for="(m,n) in pxArr" :key="n">
					<view class="px-text">{{$t('fan')[m.text]}}</view>
					<view class="align-center">
						<view class="align-center px-img justify-center"
							:class="m.selpx=='asc'&&pxactive==n?'red fstj-h-t-ac':''" @click="pxBtn(n,'asc')"
							:style="{width:(lang=='en'?'180rpx':'100rpx')}">
							<view class="mr5 ft12"><text>{{$t('common').升序}}</text></view>
							<image
								:src="m.selpx=='asc'&&pxactive==n?'../../../static/images/fans/fshongsheng.png':'../../../static/images/fans/fshuisheng.png'"
								style="width: 12rpx;height: 24rpx;" mode="aspectFill"></image>
						</view>
						<view class="align-center px-img justify-center"
							:class="m.selpx=='desc'&&pxactive==n?'red fstj-h-t-ac':''" @click="pxBtn(n,'desc')"
							:style="{width:(lang=='en'?'180rpx':'100rpx')}">
							<view class="mr5 ft12"><text>{{$t('common').降序}}</text></view>
							<image
								:src="m.selpx=='desc'&&pxactive==n?'../../../static/images/fans/fshongxia.png':'../../../static/images/fans/fshuijiang.png'"
								style="width: 12rpx;height: 24rpx;" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 拨打电话 -->
		<u-popup :show="bdpop" mode="center" round="10" :safeAreaInsetBottom="false">
			<view class="qx-box">
				<!--   -->
				<view class="qx-text" v-if="area_code=='+86'">{{$t('fandetail').确定拨打电话}}：{{callPhone}}？
				</view>
				<!--  -->
				<view class="qx-text" v-if="area_code!='+86'">
					{{$t('fandetail').确定拨打国际电话}}：{{area_code}}
					{{callPhone}}{{$t('fandetail').吗受运营商限制请确认您已开通国际长途业务如未开通将拨打失败}}
				</view>

				<view class="qx-bot align-center">
					<view class="qx-btn" style="border-right: 1rpx solid #EEEEEE;" @click="bdclose()">
						{{$t('common').取消}}
					</view>
					<view class="qx-btn" @click="bdconfirm()">{{$t('common').确认}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: true
				},
				upOption: {
					auto: false,
					page: {
						num: 0,
						size: 20,
					},
					textNoMore: '已经到底了'
				},
				isshow: false,
				bdpop: false,
				// 排序
				pxArr: [{
						id: 1,
						text: "注册时间",
						name: 'reg', //注册时间
					},
					{
						id: 2,
						text: "最后下单时间",
						name: 'final_order', //最后下单时间
					},
					{
						id: 3,
						text: "PLUS到期时间",
						name: 'puls_expiration', //PlUS到期时间
					},
					{
						id: 4,
						text: "粉丝累计销售额",
						name: 'fans_order', // 粉丝累计销售额
					},
					// {
					// 	id: 5,
					// 	text: "粉丝累计贡献收益",
					// 	name: 'fans_sell', // 粉丝累计贡献收益
					// },
					{
						id: 6,
						text: "粉丝本月销售额_已结算",
						name: 'fans_moon_sell', // 粉丝本月销售额
					},
					{
						id: 7,
						text: "粉丝本月新增销售额",
						name: 'fans_add_moon_sell', // 本月新增销售额
					},
					{
						id: 8,
						text: "本月自购销售额",
						name: 'fans_self_moon_sell', // 本月自购销售额
					}
				],
				pxactive: -1, //排序的下标
				pxtitle: false, //排序高亮
				content: '', //内容
				reg: '', //注册时间
				final_order: '', //最后下单时间
				puls_expiration: '', //PlUS到期时间
				fans_order: '', // 粉丝累计销售额
				fans_sell: '', // 粉丝累计贡献收益
				fans_moon_sell: '', // 粉丝本月销售额
				fans_add_moon_sell: '', // 本月新增销售额
				fans_self_moon_sell: '', // 本月自购销售额
				nowUserinfo: [], //今日安排用户信息
				type: '', //今日安排类型
				lang: '',
				callPhone: '',
				area_code: ''
			}
		},
		onLoad(options) {
			this.$store.dispatch('getuserInfo')
			this.content = options.content
			this.type = options.type
			// this.getarrangelistAPI()
			uni.setNavigationBarTitle({
				title: this.$t('index').今日安排
			})
			this.lang = uni.getStorageSync('lang').lang
			this.pxBtn(0, 'desc')
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
		},
		methods: {
			// 排序选择
			pxBtn(n, order) {
				this.pxactive = n
				this.pxArr.forEach((item, index) => {
					if (n == index) {
						this.$set(this.pxArr[n], 'selpx', order)
					} else {
						this.$set(this.pxArr[index], 'selpx', '')
					}
				})
				this.pxtitle = true
				this.isshow = false
				// this.getarrangelistAPI()
				this.mescroll && this.mescroll.resetUpScroll()
			},
			csort() {
				this.isshow = !this.isshow
			},
			// async getarrangelistAPI() {
			// 	let pxobj = {
			// 		type: this.type
			// 	}
			// 	this.pxArr.forEach((item, index) => {
			// 		pxobj[item.name] = item.selpx || ''

			// 	})
			// 	const res = await this.$api.getarrangelist(pxobj)
			// 	this.nowUserinfo = res.data.list
			// },
			// 今日安排
			upCallback(page) {
				let pxobj = {
					type: this.type
				}
				this.pxArr.forEach((item, index) => {
					pxobj[item.name] = item.selpx || ''

				})
				if (page.num == 1) this.nowUserinfo = []; //如果是第一页需手动制空列表
				this.$api.getarrangelist({
					...pxobj,
					page: page.num,
					limit: page.size
				}).then(res => {
					let curPageData = res.data.list; //当前页的数据列表
					let curPageLen = curPageData?.length; //当前页的数据长度
					let totalPage = parseInt(res.data.count / 20) + 1; //总页数
					let hasNext = page.num === totalPage ? false : true //根据页数判断是否有下一页
					this.nowUserinfo = this.nowUserinfo.concat(curPageData); //追加新数据
					this.mescroll.endSuccess(curPageLen, hasNext);
					this.gradeinfo = res.data.gradeinfo
				})
			},
			call(index) {
				this.bdpop = true
				this.callPhone = this.nowUserinfo[index].phone
				this.area_code = this.nowUserinfo[index].area_code
			},
			bdclose() {
				this.bdpop = false
			},
			// 打电话
			callPhoneN() {
				uni.makePhoneCall({
					phoneNumber: this.callPhone
				});
			},
			bdconfirm() {
				this.bdpop = false
				this.callPhoneN()
			},
		}
	}
</script>

<style lang="scss">
	// 排序
	.px-con {
		padding: 0 24rpx;
		overflow-y: scroll;

		.px-list {
			height: 100rpx;
			border-bottom: 2rpx solid #EEEEEE;

			.px-text {
				font-size: 30rpx;
			}

			.px-img {
				width: 100rpx;
				height: 46rpx;
				border-radius: 4px;
				margin-right: 24rpx;
				background: #F8F8F8;
			}

			.fstj-h-t-ac {
				background: #FFD9D7;
				border: 2rpx solid #EE6753;
				color: #EE6753;
			}
		}
	}

	.asc {
		background: #FFE5E4;
		border: 1px solid #F44A42;
	}

	.qx-box {
		width: 600rpx;
		// height: 246rpx;
		background: #ffffff;
		border-radius: 10rpx;

		.qx-text {
			color: #2A2A2A;
			font-size: 30rpx;
			padding: 56rpx 40rpx;
			text-align: center;
		}

		.qx-bot {
			border-top: 2rpx solid #EEEEEE;

			.qx-btn {
				width: 50%;
				height: 92rpx;
				text-align: center;
				line-height: 80rpx;
				color: #2A2A2A;
				font-size: 30rpx;
			}
		}
	}
</style>